<template>
  <div class="six">
    <div class="company-title">历史12月销售数据分析</div>
    <div></div>
    <div class="btn_group">
      <el-button @click="analysicData('0')" size="small"  :type="recordStatus == '0' ? 'primary':'info'" >同比</el-button>
      <el-button @click="analysicData('1')" size="small" :type="recordStatus == '1' ? 'primary':'info'">环比</el-button>
    </div>
    <div id="company-chart03"></div>
  </div>
</template>
<script>
var echarts = require("echarts");

import companyApi from "@/api/company/index";
export default {
  name: "companySix",
  data() {
    return {
      dataSixInfo:[],
      dataSixInfoList:[],
      recordStatus:'0',
      
    };
  },
  mounted() {
   
    this.getxssjzs()
  },
  methods: {
    // 点击同比 和环比
    analysicData(type){
      this.recordStatus = type
     this.draw()
    }, 
    draw() {
      let that = this
      let nameList = []
      let valueList = [] 
      let filed = '',filedName = ''
       // 同比
      if(this.recordStatus == '0'){
        // filed='value'
         filed='tb'
         filedName = '同比'
      } else {
        // 环比
        filed='hb'
        filedName = '环比'
      }
      let tbhbList = []
      this.dataSixInfo.map(item=>{
        nameList.push(item.gqTimeName)
        valueList.push(item.value)
        tbhbList.push(item[filed])
      }) 
      var drawCharts = document.getElementById("company-chart03"); // 对应地使用ByClassName
      var drawChart = echarts.init(drawCharts);
      let legend = ['销量',filedName]
      var option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          show: true,
          icon: "rect",
          itemWidth: 20,
          itemHeight: 3,
          right: "0%",
          top: "0%",
          textStyle: {
            color: "#65ABE7",
            fontSize:that.getRealPX(12),
          },
          data: legend,
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var str = "";
            for (var i = 0; i < params.length; i++) {
              if(i == 0){
                str +=
                  params[i].name +
                  ":" +
                  params[i].seriesName +
                  params[i].value +
                  "吨" +
                  "<br/>";
              } else {
                str +=
                   params[i].name +
                  ":" +
                  (filed == 'tb' ? '同比':'环比') +
                  params[i].value +
                  "%"; 
              }
              
            }
           
            return str;
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data:   nameList,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                fontSize: that.getRealPX(12),
                color: "#CCCCCC",
              },
              interval: 0,
              rotate: 40,
            },
            axisLine: {
              lineStyle: {
                color: "#65C6E7",
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontSize: that.getRealPX(12),
                color: "#CCCCCC",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
                color: "rgba(139, 227, 255, .3)",
              },
            },
          },
          {
            type: "value",
            name: "%",
            nameTextStyle: {
              fontSize: that.getRealPX(12),
              color: "#65ABE7",
            },
            // min: -100,
            // max: 100,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontSize: that.getRealPX(12),
                color: "#65ABE7",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
                color: "#65C6E7",
              },
            },
          },
        ],
        series: [
          {
            name: "销量",
            type: "bar",
            barWidth: "40%",
            data: valueList,
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  //数值样式
                  color: "#CCCCCC",
                  fontSize: that.getRealPX(12),
                },
              },
            },
          },
          {
            name: filedName,
            type: "line",
            yAxisIndex: 1,
            smooth: false,
            symbol: "circle",
            // symbolSize: 10,
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            itemStyle: {
              normal: {
                color: "#EF4864",
                borderColor: "#fff",
                borderWidth: 1,
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(255, 140, 140, 0.2)",
                    },
                    {
                      offset: 1,
                      color: "#FF8C8C",
                    },
                  ]),
                },
              },
            },
            data: tbhbList,
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  //数值样式
                  color: "#EF4864",
                  fontSize: that.getRealPX(12),
                },
              },
            },
          }
        ],
      };

      drawChart.setOption(option);
    },
    getxssjzs() {
      let that = this;
      companyApi
        .dataSix({longCompanyId:this.$route.query.longCompanyId})
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            that.dataSixInfo = res; 
             that.draw();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },  
};
</script>
<style lang="stylus" scoped>
.text-main {
  color: #007FFE;
}

#company-chart03 {
  width: 570px;
  height: 400px;
  margin-top:-30px;
}

.six {
  width: 570px;
  height: 456px;
  background: url('../../../assets/img/company/bg06.png') no-repeat;
  background-size: 570px 456px;
}
.btn_group{
  display:flex;
  width:50%;
  justify-content flex-start;
  padding-left:20px;
  padding-top:10px;
  z-index:100000;
  position:relative;
}
</style>
